/* eslint-disable no-debugger */
/* eslint-disable react/void-dom-elements-no-children */
/**
 * 表单面板组件
 * @author LiAnqi
 * @date 2022-03-17
 * @description
 * [Props]
 * name 名称，用作Key，
 * fields 表单字段集
 * datas 数据集
 * mode 表单模式：编辑模式 edit, 浏览模式  browse
 * panelType 表单面板类型： card, collapse,  whiteboard;
 * formProps 表单布局属性
 *   {
 *     layout:'...', // 表单布局类型： horizonal, vertical, flex;
 *     fieldSpan:'...', // 每字段所占栅格数, 仅到layout为flex有效，可选值：6,8,12,24，分别得到每行显示字段数4,3,2,1；
 *     labelSpan: '...', // 标签文本占用栅格数, 仅到layout为flex有效，需要小于fieldSpan;
 *     labelAlign:'...', // 标签文本的对齐方式, 仅到layout为flex有效，left / right ;
 *     labelWrap: '...', // 标签文本是否可以换行, 仅到layout为flex有效， true false ;
 *   }
 * formToolbar 面板工具内容，渲染在面板的右上角
 * formFootbar 面板脚栏工具，渲染在面板底下工具栏
 */
import { useState, useRef, useCallback } from 'react'
import { Row, Col, Button } from 'antd'
import { LAYOUT, MODE } from './config/Constant'
import PanelSkeleton from './panel/PanelSkeleton'
import FCForm from './FCForm'
import FCFormCard from './FCFormCard'
import './FCFormPanel.css'

function FCFormPanel(props) {
  // const {
  //   name,
  //   title,
  //   fields,
  //   dataSource,
  //   mode = MODE.BROWSE,
  //   panelType,
  //   formProps,
  //   ifButton,
  // } = props
  const { panelProps, formProps, dataSet, formPanelRef, ...restProps } = props
  const withDataSet = !!dataSet
  const { name, title, datas, fields } = dataSet || restProps
  const { type, showButton, mode = MODE.BROWSE } = panelProps
  const { layout } = formProps
  const [formMode, setFormMode] = useState(mode)
  const formRef = useRef(`form${name}`)
  const footerCol = layout === LAYOUT.HORIZONAL ? [6, 8] : [0, 8]

  const handleReset = () => {
    formRef.current.resetForm()
  }

  const handleSubmit = () => {
    formRef.current.submit()
  }

  const handleTrigger = () => {
    setFormMode(MODE.EDIT)
  }

  const onFormFinish = useCallback((values) => {
    setFormMode(MODE.BROWSE)
  }, [])

  const onFormFinishFailed = useCallback((values, errorFields, outOfDate) => {
    // console.log(values)
  }, [])

  const onValuesChange = useCallback((changedValues, allValues) => {
    // console.log(changedValues)
  }, [])

  return (
    <div className="form-panel">
      <div className="form-panel-main">
        <PanelSkeleton title={title} panelType={type}>
          {formMode === MODE.EDIT ? (
            <FCForm
              formRef={formRef}
              dataSet={dataSet}
              layoutProps={formProps}
              onFinish={onFormFinish}
              onFinishFailed={onFormFinishFailed}
              onValuesChange={onValuesChange}
            />
          ) : (
            <FCFormCard
              name={name}
              dataSource={datas}
              fields={fields}
              formProps={formProps}
              collapsible
            />
          )}
        </PanelSkeleton>
      </div>
      <div className="form-panel-footer">
        {showButton ? (
          <Row justify="start">
            <Col span={footerCol[0]} />
            <Col span={footerCol[1]}>
              {formMode === MODE.EDIT ? (
                <>
                  <Button onClick={handleReset}>重置</Button>
                  <Button type="primary" onClick={handleSubmit}>
                    提交
                  </Button>
                </>
              ) : (
                <Button onClick={handleTrigger}>编辑</Button>
              )}
            </Col>
          </Row>
        ) : null}
      </div>
    </div>
  )
}

export default FCFormPanel
